<template>
<view>
<!--<import src="../../templates/copyright.wxml"></import>-->


<view class="topic-list clearfix">
  <block v-for="(item, index) in categoriesList" :key="index">
    <view class="list-item">
      <view>
        <image :src="item.thumb" class="topic-img" :data-item="item.name" :data-id="item.id" @tap="redictIndex" mode="aspectFill"></image>
      </view>
      <view class="topic-name-box" :data-item="item.name" :data-id="item.id" @tap="redictIndex">
        <view class="topic-name">
          <text class="topic-name">{{item.name}}</text>
        </view>
        
      </view>
      <view class="topic-brief" :data-item="item.name" :data-id="item.id">
        <text>{{item.description}}</text>
      </view>
    </view>
  </block>
</view>

<!-- 未登录时弹出的登录框 -->

<!-- 版权信息 -->
<view class="copyright" :style="'display:' + floatDisplay">
   <block data-type="template" data-is="tempCopyright" data-attr="webSiteName:webSiteName,domain:domain">
<view> {{webSiteName}} </view>
</block>
</view>
</view>
</template>

<script>

import config from "../../utils/config";
var Api = require("../../utils/api.js");
var util = require("../../utils/util.js");

var wxApi = require("../../utils/wxApi.js");
var wxRequest = require("../../utils/wxRequest.js");
var webSiteName = config.getWebsiteName;
var domain = config.getDomain;

export default {
  data() {
    return {
      text: "Page topic",
      categoriesList: {},
      floatDisplay: "none",
      userInfo: {},
      webSiteName: webSiteName,
      domain: domain
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: '栏目'
    });
    this.fetchCategoriesData();
  },
  onShow: function () {},
  onShareAppMessage: function () {
    return {
      title: '分享“' + config.getWebsiteName + '”的专题栏目.',
      path: 'pages/topic/topic',
      success: function (res) {// 转发成功
      },
      fail: function (res) {// 转发失败
      }
    };
  },
  methods: {
    //获取分类列表
    fetchCategoriesData: function () {
      var self = this;
      self.setData({
        categoriesList: []
      });
      var getCategoriesIdsRequest = wxRequest.getRequest(Api.getCategoryUrl());
      getCategoriesIdsRequest.then(res => {
   if (res.data.code == 1) {
	   self.categoriesList = res.data.data;
	   }

        
      });
    },
    reloadData: function (id) {
      var self = this;
      var newCategoriesList = [];
      var categoriesList = self.categoriesList;

      for (var i = 0; i < categoriesList.length; i++) {
        if (categoriesList[i].id == id) {}

        newCategoriesList.push(categoriesList[i]);
      }

      if (newCategoriesList.length > 0) {
        self.setData({
          categoriesList: newCategoriesList
        });
      }
    },
    //跳转至某分类下的文章列表
    redictIndex: function (e) {
      //console.log('查看某类别下的文章');  
      var id = e.currentTarget.dataset.id;
      var name = e.currentTarget.dataset.item;
      var url = '../list/list?categoryID=' + id;
      wx.navigateTo({
        url: url
      });
    }
  }
};
</script>
<style>
@import "./topic.css";
</style>